<script setup lang="ts">
import { onClickOutside } from '@vueuse/core'
import { ref,computed } from 'vue';
const visible = ref(false)
const target=ref()
interface Props{
  mode?:'center'|'top'|'bottom'|'left'|'right'
}
const props=withDefaults(defineProps<Props>(),{
  mode:'center'
})
const emit=defineEmits<{
  (e: 'hide'): void
  (e: 'show'): void
}>()
const align=computed(() =>{
  let c=''
  switch(props.mode){
    case 'center':
      c='justify-center items-center'
      break
    case 'top':
      c='justify-center items-start'
      break
    case 'bottom':
      c='justify-center items-end'
      break
    case 'left':
      c='justify-start items-center'
      break
    case 'right':
      c='justify-end items-center'
      break
  }
  return c
})
onClickOutside(target, (evt) => {
  hideModel()
})
function showModel(){
  visible.value=true
  emit('show')
}
function hideModel(){
  visible.value=false
  emit('hide')
}
defineExpose({
  showModel,hideModel
});
</script>

<template>
  <teleport to="body">
    <div v-if="visible" class="mask" :class="[align]"
      w:w="screen"
      w:h="screen"
      w:pos="fixed top-0 left-0"
      w:flex="~ nowrap"
    >
      <div ref="target"
        w:flex="~ col nowrap"
      >
        <slot></slot>
      </div>
    </div>
  </teleport>
</template>

<style lang="scss" scoped>
.mask{
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
}
</style>
